<template>
  <div class="course-design-container">
    <a-row :gutter="16">
      <!-- 左侧：课程大纲编辑器 -->
      <a-col :span="16">
        <a-card title="课程大纲生成器" class="section-card outline-editor-card">
          <!-- 大纲编辑区域 -->
          <div class="outline-content">
            <a-empty v-if="!uploadedFiles.length" description="请上传课程大纲文件">
              <template #image>
                <file-add-outlined class="empty-icon" />
              </template>
              <a-button type="primary" @click="showUploadModal" ref="uploadBtnRef"
                >上传大纲</a-button
              >
            </a-empty>

            <div v-else class="outline-preview">
              <p class="tip-text">
                已上传文件: <b>{{ uploadedFiles[0].name }}</b>
              </p>
              <a-space direction="vertical" style="width: 100%; margin-top: 20px">
                <a-button block @click="previewCurrentFile">预览文件</a-button>
                <a-button block @click="clearUploadedFile">重新上传</a-button>
                <a-button
                  block
                  type="primary"
                  @click="generateCourseDesign"
                  :loading="generatingDesign"
                  ref="generateBtnRef"
                >
                  AI 一键生成课程设计
                </a-button>
              </a-space>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 右侧：最近备课和课程信息 -->
      <a-col :span="8">
        <!-- 最近备课列表 -->
        <a-card title="最近备课" class="section-card">
          <a-list item-layout="horizontal" :data-source="dataList" ref="recentCoursesRef">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta
                  :title="item.title"
                  :description="`${formatDate(item.publishTime)}`"
                >
                  <template #avatar>
                    <a-avatar :style="{ backgroundColor: getColorById(item.id) }">
                      {{ item.title.charAt(0) }}
                    </a-avatar>
                  </template>
                </a-list-item-meta>

                <template #extra>
                  <a-tag :color="getStatusColor(getStatusLabel(item.status))" class="status-tag">
                    {{ getStatusLabel(item.status) }}
                  </a-tag>
                </template>
                <template #actions>
                  <a-space>
                    <a-button
                      type="primary"
                      size="small"
                      :disabled="isButtonDisabled(item.status)"
                      @click="openCourseDesign(item.id)"
                      ref="editBtnRef"
                      >查看并编辑</a-button
                    >
                    <!--                    <a-button type="link" size="small" @click="viewCourseDesign(item.id)"-->
                    <!--                      ></a-button-->
                    <!--                    >-->
                  </a-space>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </a-card>

        <!-- 历史记录按钮 -->
        <!--        <a-button
          type="primary"
          block
          class="history-button"
          @click="openHistoryDrawer"
          style="margin-bottom: 10px"
        >
          <history-outlined /> 课程设计历史记录
        </a-button>-->

        <!-- 操作引导浮层按钮 -->
        <a-button type="dashed" block class="guide-button" @click="showGuide">
          <bulb-outlined /> 新手操作引导
        </a-button>
      </a-col>
    </a-row>
    <!--功能特点-->
    <div class="features-section">
      <div class="desc">课程设计平台功能特点</div>
      <a-row :gutter="[24, 24]">
        <a-col
          v-for="(item, index) in features"
          :key="index"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="8"
          :xl="8"
          :xxl="4"
        >
          <a-card :hoverable="true" class="feature-card">
            <div class="feature-icon">
              <component :is="item.icon" style="font-size: 36px; color: #1890ff" />
            </div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <!-- 上传大纲弹窗 -->
    <a-modal v-model:open="uploadModalVisible" title="上传课程大纲" @ok="handleUploadOk">
      <template #footer>
        <a-button @click="() => (uploadModalVisible = false)">取消</a-button>
        <a-button type="primary" @click="handleUploadOk" ref="uploadOkBtnRef">确定</a-button>
      </template>
      <a-upload-dragger
        name="file"
        :multiple="false"
        :before-upload="beforeUpload"
        :custom-request="handleUpload"
        :show-upload-list="false"
      >
        <!--        @change="handleFileChange"-->
        <p class="ant-upload-drag-icon">
          <inbox-outlined />
        </p>
        <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
        <p class="ant-upload-hint">请上传一个课程大纲文件。支持 .docx, .pdf, .md 等格式文件。</p>
      </a-upload-dragger>

      <!-- 已上传文件列表 -->
      <a-divider v-if="uploadedFiles.length > 0">已上传文件</a-divider>
      <a-list
        v-if="uploadedFiles.length > 0"
        size="small"
        :dataSource="uploadedFiles"
        :rowKey="rowKey"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :title="item.name">
              <template #avatar>
                <file-outlined v-if="item.type === 'docx'" style="color: #2b579a" />
                <file-pdf-outlined v-else-if="item.type === 'pdf'" style="color: #e23d28" />
                <file-outlined v-else-if="item.type === 'doc'" style="color: #217346" />
                <file-unknown-outlined v-else />
              </template>
            </a-list-item-meta>
            <template #actions>
              <a-button type="link" size="small" @click="showFilePreview(item)">预览</a-button>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </a-modal>

    <!-- 文件预览模态框 -->
    <a-modal
      v-model:open="previewModalVisible"
      :title="previewFileName"
      width="80%"
      style="top: 20px"
      :footer="null"
    >
      <div class="file-preview-container">
        <!-- Word文档预览 -->
        <template v-if="previewFileType === 'docx'">
          <vue-office-docx :src="previewFileUrl" :config="{ width: '100%', height: '70vh' }" />
        </template>

        <!-- PDF预览 -->
        <template v-else-if="previewFileType === 'pdf'">
          <vue-office-pdf :src="previewFileUrl" :config="{ width: '100%', height: '70vh' }" />
        </template>

        <!-- Excel预览 -->
        <template v-else-if="previewFileType === 'xlsx'">
          <vue-office-excel :src="previewFileUrl" :config="{ width: '100%', height: '70vh' }" />
        </template>

        <!-- 其他文件类型 -->
        <template v-else>
          <div class="unsupported-file-type">
            <file-unknown-outlined style="font-size: 48px; color: #faad14" />
            <p>暂不支持该类型文件的预览，请下载后查看</p>
            <a-button type="primary" @click="downloadFile">下载文件</a-button>
          </div>
        </template>
      </div>
    </a-modal>

    <!-- 文件抽屉在单文件场景中已不需要，但可以保留 -->
    <!--    <a-drawer
      title="当前上传文件"
      placement="right"
      :width="500"
      v-model:open="filesDrawerVisible"
      @close="filesDrawerVisible = false"
    >
      <div v-if="uploadedFiles.length > 0">
        <a-descriptions title="文件详情" bordered>
          <a-descriptions-item label="文件名称">
            {{ uploadedFiles[0].name }}
          </a-descriptions-item>
          <a-descriptions-item label="文件类型">
            {{ uploadedFiles[0].type.toUpperCase() }}
          </a-descriptions-item>
        </a-descriptions>

        <div style="margin-top: 20px; text-align: center">
          <a-button type="primary" @click="previewCurrentFile">预览文件</a-button>
          <a-button style="margin-left: 10px" @click="clearUploadedFile">删除文件</a-button>
        </div>
      </div>
      <a-empty v-else description="没有上传的文件" />
    </a-drawer>-->

    <!-- 右侧触发器按钮 -->
    <div class="trigger-btn" @click="openHistoryDrawer">
      <span>&lt;</span>
    </div>

    <!-- 历史记录抽屉 -->
    <div v-if="historyDrawerOpen" class="drawer-overlay" @click="closeHistoryDrawer"></div>
    <div class="history-drawer" :class="{ 'drawer-open': historyDrawerOpen }">
      <div class="drawer-header">
        <h3 class="drawer-title">课程设计历史记录</h3>
        <button class="drawer-close" @click="closeHistoryDrawer">
          <close-outlined />
        </button>
      </div>

      <div class="drawer-content">
        <div class="drawer-pane">
          <ul class="drawer-history-list">
            <li
              v-for="record in historyDataList"
              :key="record.id"
              @dblclick="handleSwitchCourse(record)"
            >
              <div class="course-cover">
                <img
                  v-if="record.coverImgSrc"
                  :src="record.coverImgSrc"
                  :alt="record.title"
                  @error="handleCoverImageError"
                  @load="handleCoverImageLoad"
                />
                <div
                  v-else
                  class="course-avatar"
                  :style="{ backgroundColor: getColorById(record.id) }"
                >
                  {{ record.title.charAt(0) }}
                </div>
              </div>
              <div class="course-content">
                <div class="course-title">{{ record.title }}</div>
                <div class="course-info">
                  <span class="course-date">{{ formatDate(record.publishTime) }}</span>
                </div>
                <div class="course-status" :class="getStatusEN(record.status)">
                  {{ getStatusLabel(record.status) }}
                </div>
              </div>
            </li>
          </ul>
        </div>

        <div class="drawer-pagination">
          <a-pagination
            v-model:current="queryParams.current"
            :total="Number(historyTotal)"
            show-less-items
            size="small"
            :show-total="(total) => `共有 ${total}条记录`"
            @change="handleHistoryPageChange"
          />
        </div>
      </div>
    </div>

    <!-- 漫游式引导组件 -->
    <a-tour
      v-model:current="currentStep"
      :steps="steps"
      :mask="{
        style: {
          boxShadow: 'inset 0 0 15px #333',
        },
        color: 'rgba(80, 255, 255, .4)',
      }"
      v-model:open="tourOpen"
      @finish="onTourFinish"
      @close="TourClose"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import {
  InboxOutlined,
  FileAddOutlined,
  FilePdfOutlined,
  FileOutlined,
  BulbOutlined,
  FileUnknownOutlined,
  CloseOutlined,
} from '@ant-design/icons-vue'
import { message, type TourProps, type UploadProps } from 'ant-design-vue'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
import { useRouter } from 'vue-router'
import {
  deleteGenerateTeach,
  generateTeachFileAsy,
  generateTeachFile,
  listGenerateTeachVoByPage,
  uploadTeachFile,
} from '@/api/generateTeachController'
import dayjs from 'dayjs'
import { getStatusLabel, Status } from '@/utils/enums/GenerateTeachEnum'
const router = useRouter()

//格式化日期
const formatDate = (date: string) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

//生成
const generatingDesign = ref(false)

// 文件预览相关
const previewModalVisible = ref(false)
const previewFileName = ref('')
const previewFileUrl = ref('')
const previewFileType = ref('')
const uploadedFiles = ref<any[]>([])
const currentFileInfo = ref<API.UploadReturnVO>()
// 预览当前文件
const previewCurrentFile = () => {
  if (uploadedFiles.value.length > 0) {
    showFilePreview(uploadedFiles.value[0])
  }
}
//上传文件前的检查

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  const isValidType =
    file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || // docx
    file.type === 'application/msword' || // doc
    file.type === 'application/pdf' || // pdf
    file.type === 'text/markdown' // md;
  if (!isValidType) {
    message.error('只能上传.docx, .pdf, .md 等格式文件!')
  }

  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    message.error('图片大小不能超过 10MB!')
  }

  return isValidType && isLt10M
}
//处理上传
const handleUpload = async ({ file }: any) => {
  // 保存上传的文件信息
  const fileExt = file.name.split('.').pop().toLowerCase()

  const res = await uploadTeachFile(file)
  try {
    if (res.data.data && res.data.code === 0) {
      message.success('文件上传成功')
      currentFileInfo.value = res.data.data
      // 清除之前的文件（只保留一个文件）
      uploadedFiles.value = [
        {
          name: file.name,
          // response?.url ||
          url: res.data.data.fileUrl,
          type: fileExt,
        },
      ]
      //     // 自动预览刚上传的文件
      showFilePreview(uploadedFiles.value[0])
      // 上传成功后自动关闭模态框
      uploadModalVisible.value = false
    } else {
      message.error('文件上传失败,' + res.data.msg)
      uploadedFiles.value = []
    }
  } catch (e) {
    message.error('文件上传失败,' + res.data.msg)
    uploadedFiles.value = []
  }
}

// 清除已上传文件
const clearUploadedFile = async () => {
  //请求删除
  const currentFileId = currentFileInfo.value?.id
  try {
    const res = await deleteGenerateTeach({
      id: currentFileId,
    })
    if (res.data.data && res.data.code === 0) {
      uploadedFiles.value = []
      message.success('已清除上传文件，您可以重新上传')
    } else {
      message.error('重新上传失败，请稍候重试')
    }
  } catch (e) {
    message.error('重新上传失败，请稍候重试')
  }
}

// 显示文件预览
const showFilePreview = (file: any) => {
  previewFileName.value = file.name
  previewFileUrl.value = file.url
  previewFileType.value = file.type
  previewModalVisible.value = true
}

// 下载文件
const downloadFile = () => {
  if (!previewFileUrl.value) return

  const link = document.createElement('a')
  link.href = previewFileUrl.value
  link.download = previewFileName.value
  link.click()

  message.success('文件下载中...')
}

// 生成课程大纲
const generateCourseDesign = async () => {
  generatingDesign.value = true
  //得到生成的id
  const currentFileId = currentFileInfo.value?.id as string
  try {
    // const res = await generateTeachFileAsy(currentFileId)
    const res = await generateTeachFile({
      currentFileId,
    })
    if (res.data.data && res.data.code === 0) {
      message.success('课程设计生成中！')
      await fetchData()
    } else {
      message.error('课程设计生成失败！')
      generatingDesign.value = false
    }
  } catch (e) {
    message.error('课程设计生成失败！')
    generatingDesign.value = false
    //超时处理 90s未完成视为失败
  }
}
const dataList = ref<API.GenerateTeachVO[]>([])
//搜索条件 复用分页查询的接口
const searchParams = reactive<API.GenerateTeachQueryDTO>({
  current: 1,
  pageSize: 3, //固定只能展示3个数据
})

// 历史记录抽屉相关
const historyDrawerOpen = ref(false)
const historyTotal = ref(0)
const historyDataList = ref<API.GenerateTeachVO[]>([])
// 分页查询参数
const queryParams = reactive<API.GenerateTeachQueryDTO>({
  current: 1,
  pageSize: 10,
})

// 获取历史记录数据
const fetchHistoryData = async () => {
  try {
    const res = await listGenerateTeachVoByPage({
      ...queryParams,
    })
    if (res.data.data && res.data.code === 0) {
      historyDataList.value = res.data.data.records ?? []
      historyTotal.value = res.data.data.total
    } else {
      message.error('获取历史数据失败')
    }
  } catch (e) {
    message.error('获取历史数据失败')
  }
}

// 打开历史记录抽屉
const openHistoryDrawer = () => {
  historyDrawerOpen.value = true
  fetchHistoryData()
}

// 关闭历史记录抽屉
const closeHistoryDrawer = () => {
  historyDrawerOpen.value = false
}

// 处理历史记录分页
const handleHistoryPageChange = (page: number) => {
  queryParams.current = page
  fetchHistoryData()
}

// 双击切换课程设计
const handleSwitchCourse = (record: any) => {
  if (record.status === 1) {
    // 如果是已完成的课程设计，跳转到编辑页面
    router.push(`/teacher/course_design/edit/${record.id}`)
    closeHistoryDrawer()
    message.success('正在打开课程设计')
  } else if (record.status === 5) {
    message.info('课程设计正在生成中，请稍候...')
  } else {
    message.warning('课程设计生成失败，请重新生成')
  }
}

// 获取状态英文文本
const getStatusEN = (status: number) => {
  const statusMap: Record<string, string> = {
    1: 'completed',
    5: 'processing',
    6: 'failed',
  }
  return statusMap[status] || 'unknown'
}

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<string, string> = {
    1: '已完成',
    5: '生成中',
    6: '生成失败',
  }
  return statusMap[status] || '未知状态'
}

// 处理封面图片错误
const handleCoverImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src =
    ''
}

// 处理封面图片加载
const handleCoverImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.style.opacity = '1'
}
//页面加载自动获取数据
onMounted(() => {
  fetchData()
})
const fetchData = async () => {
  try {
    const res = await listGenerateTeachVoByPage({
      ...searchParams,
    })
    if (res.data.data && res.data.code === 0) {
      dataList.value = res.data.data.records ?? []
    } else {
      message.error('获取最近备课列表失败' + res.data.msg)
    }
  } catch (e) {
    message.error('获取最近备课列表失败' + e)
  }
}
//定义颜色
const colors = ['#1890ff', '#52c41a', '#722ed1'] // 预定义颜色列表
// 接收一个数字，根据数字 % 3 的结果返回对应的颜色
const getColorById = (num: number) => {
  const index = num % 3 // 计算下标
  return colors[index] // 返回对应的颜色
}

// 判断按钮是否需要禁用
const isButtonDisabled = (status: number): boolean => {
  return (
    status === Status.Failed || // 失败
    status === Status.Generating || // 生成中
    status === Status.Pending // 等待中
  )
}
// 根据状态获取标签颜色
const getStatusColor = (status: string) => {
  const statusColors: Record<string, string> = {
    已发布: 'green',
    草稿: 'orange',
    等待中: 'blue',
    下架: 'purple',
    生成中: 'gray',
    失败: 'red',
  }
  return statusColors[status] || 'default'
}

// 打开课程设计
const openCourseDesign = (id: string | number) => {
  // 跳转到编辑页面
  router.push(`/teacher/course_design/edit/${id}`)
}

// 上传弹窗
const uploadModalVisible = ref(false)
const showUploadModal = () => {
  uploadModalVisible.value = true
}
const handleUploadOk = () => {
  uploadModalVisible.value = false
}

// 操作引导
const currentStep = ref(0)
const tourOpen = ref(false)

// 引用元素
const uploadBtnRef = ref()
const uploadOkBtnRef = ref()
const generateBtnRef = ref()
const recentCoursesRef = ref()
const editBtnRef = ref()

const steps: TourProps['steps'] = [
  {
    title: '上传大纲文件',
    description: '点击这里上传您的课程大纲文件，支持Word、PDF、Markdown等多种格式。',
    target: () => uploadBtnRef.value && uploadBtnRef.value.$el,
  },
  {
    title: '确认上传',
    description: '上传完成后，点击确定按钮完成文件上传。',
    target: () => uploadOkBtnRef.value && uploadOkBtnRef.value.$el,
  },
  {
    title: '最近备课',
    description: '在这里可以查看您最近的课程设计，点击编辑或查看进行操作。',
    mask: {
      style: {
        boxShadow: 'inset 0 0 15px #fff',
      },
      color: 'rgba(40, 0, 255, .4)',
    },
    target: () => recentCoursesRef.value && recentCoursesRef.value.$el,
  },
  {
    title: '编辑课程',
    mask: {
      style: {
        boxShadow: 'inset 0 0 15px #fff',
      },
      color: 'rgba(40, 0, 255, .4)',
    },
    description: '点击编辑按钮可以对课程设计进行修改和完善。',
    target: () => editBtnRef.value && editBtnRef.value.$el,
    placement: 'leftBottom', //设置为左下角
  },
]

const onTourFinish = () => {
  tourOpen.value = false
  currentStep.value = 0
  message.success('引导结束，现在您可以开始使用了！')
}
const TourClose = () => {
  tourOpen.value = false
  currentStep.value = 0
}

// 操作引导
const showGuide = () => {
  currentStep.value = 0
  tourOpen.value = true
  message.success('开始操作引导')
}

// 定义rowKey函数
const rowKey = (item: any) => item.name

// 功能特点数据
const features = ref([
  {
    icon: 'cloud-upload-outlined',
    title: '智能上传',
    description: '支持多种格式文件批量上传，如Word、PDF、Markdown等，自动识别文档内容和格式',
  },
  {
    icon: 'robot-outlined',
    title: 'AI生成大纲',
    description: '通过人工智能分析文档内容，自动提取关键知识点并生成结构化课程大纲',
  },
  {
    icon: 'schedule-outlined',
    title: '智能排课',
    description: '根据课程内容和教学目标，智能规划课时分配，合理安排教学进度',
  },
  {
    icon: 'file-pdf-outlined',
    title: '多格式导出',
    description: '课程设计内容可一键导出为PDF、PPT、Word等多种格式，满足不同教学场景需求',
  },
  {
    icon: 'share-alt-outlined',
    title: '便捷分享',
    description: '支持生成分享链接，可设置访问密码，方便与同事、学生安全分享教学资源',
  },
  // {
  //   icon: 'team-outlined',
  //   title: '协同编辑',
  //   description: '多位教师可同时在线协作编辑课程内容，实时同步，提高团队协作效率',
  // },
  {
    icon: 'book-outlined',
    title: '教学资源库',
    description: '内置丰富的教学资源库，包含优质教案、课件、习题等，助力教师快速备课',
  },
  // {
  //   icon: 'line-chart-outlined',
  //   title: '教学数据分析',
  //   description: '提供详实的教学数据统计与分析功能，帮助教师优化教学内容和教学方法',
  // },
])
</script>

<style scoped>
:root {
  --base-font-size: 14px;
}

.course-design-container {
  padding: 16px;
  font-size: var(--base-font-size);
  background: url('@/assets/BackGround/coursebg.png') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
  animation: fadeIn 0.8s ease-out;
}

.course-design-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  /*
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1), rgba(82, 196, 26, 0.1));
  */
  z-index: 0;
}

.high-contrast {
  filter: contrast(1.5);
  background-color: #000;
  color: #fff;
}

.top-action-bar {
  margin-bottom: 16px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.status-indicators {
  text-align: right;
}

.section-card {
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: slideInUp 0.8s ease-out 0.6s both;
  z-index: 1;
}

.section-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.98);
}

.outline-editor-card {
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

/* 功能特点区域样式 */
.features-section {
  margin: 40px 0;
  width: 100%;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: slideInUp 0.8s ease-out 1.2s both;
  z-index: 1;
}

.features-section .desc {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #1a3a5f;
  position: relative;
  animation: slideInDown 0.8s ease-out 1.4s both;
}

.features-section .desc:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(45deg, #1890ff, #52c41a);
  border-radius: 4px;
  animation: slideInUp 0.8s ease-out 1.6s both;
}

.feature-card {
  height: 100%;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: float 3s ease-in-out infinite;
  z-index: 1;
}

.feature-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.98);
}

.feature-icon {
  padding: 30px 0;
  text-align: center;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1), rgba(82, 196, 26, 0.1));
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.feature-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s;
}

.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.15), rgba(82, 196, 26, 0.15));
  transform: scale(1.05);
}

.feature-card:hover .feature-icon::before {
  left: 100%;
}

.feature-card h3 {
  font-size: 18px;
  margin: 16px 0 8px;
  color: #1a3a5f;
  text-align: center;
}

.feature-card p {
  color: #697b8c;
  line-height: 1.6;
  text-align: center;
  padding: 0 16px;
  margin-bottom: 16px;
}

/* 添加优化后的样式 */
.outline-content {
  padding: 30px;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: slideInUp 0.8s ease-out 0.8s both;
  z-index: 1;
}

.empty-icon {
  font-size: 72px;
  color: #1890ff;
  margin-bottom: 20px;
  animation: pulse 2s ease-in-out infinite;
}

.outline-preview {
  width: 100%;
  padding: 25px;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.05), rgba(82, 196, 26, 0.05));
  backdrop-filter: blur(8px);
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: slideInUp 0.8s ease-out 1s both;
  z-index: 1;
}

.tip-text {
  font-size: 18px;
  color: #333;
  margin-bottom: 25px;
  font-weight: 500;
  animation: slideInDown 0.8s ease-out 1.2s both;
}

.generate-button-container {
  margin: 16px 0;
}

.guide-button {
  margin-top: 10px;
}

.file-preview-container {
  width: 100%;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.unsupported-file-type {
  text-align: center;
  padding: 40px 0;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.accessibility-panel {
  position: fixed;
  right: 20px;
  z-index: 1000;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .features-section .desc {
    font-size: 20px;
  }

  .feature-card h3 {
    font-size: 16px;
  }

  .feature-card p {
    font-size: 12px;
  }
}

/* 历史记录抽屉样式 */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 999;
  animation: fadeIn 0.4s ease;
}

.history-drawer {
  position: fixed;
  top: 0;
  right: -500px;
  width: 500px;
  height: 100vh;
  background: linear-gradient(135deg, #20a1da 0%, #1a8bc7 100%);
  backdrop-filter: blur(20px);
  z-index: 1000;
  transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: -10px 0 30px rgba(32, 161, 218, 0.3);
  border-radius: 20px 0 0 20px;
  overflow: hidden;
}

.history-drawer.drawer-open {
  right: 0;
}

.drawer-header {
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
}

.drawer-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(35deg, #20a1da, #1a8bc7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.drawer-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.drawer-content {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  max-height: 900px;
  overflow-y: auto;
  padding: 12px 24px 24px 24px;
  position: relative;
  box-sizing: border-box;
}

.drawer-pane {
  margin-top: 6px;
}

.drawer-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-history-list li {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin-bottom: 18px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  height: 130px;
}

.drawer-history-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.drawer-history-list li > * {
  position: relative;
  z-index: 2;
}

/* 封面图片样式 */
.course-cover {
  width: 120px;
  height: 130px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
  position: relative;
}

.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  opacity: 0;
  animation: image-fade-in 0.5s ease forwards;
}

.course-cover img:hover {
  transform: scale(1.05);
}

/* 头像样式 */
.course-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.course-avatar:hover {
  transform: scale(1.05);
}

/* 内容区域样式 */
.course-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.course-title {
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  word-break: break-word;
  hyphens: auto;
  max-height: 36px;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}

.course-date {
  color: #e8f4fd;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.course-status {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  min-width: 65px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  align-self: flex-end;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.course-status.completed {
  background: linear-gradient(45deg, #52c41a, #73d13d);
  color: #fff;
}

.course-status.processing {
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  color: #fff;
}

.course-status.failed {
  background: linear-gradient(45deg, #ff4d4f, #ff7875);
  color: #fff;
}

.course-status.unknown {
  background: linear-gradient(45deg, #d9d9d9, #f5f5f5);
  color: #666;
}

.drawer-pagination {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
}

/* 分页组件样式 */
:deep(.ant-pagination) {
  color: #fff;
}

:deep(.ant-pagination .ant-pagination-item) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

:deep(.ant-pagination .ant-pagination-item:hover) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

:deep(.ant-pagination .ant-pagination-item-active) {
  background: linear-gradient(45deg, #20a1da, #1a8bc7);
  border-color: #20a1da;
}

:deep(.ant-pagination .ant-pagination-prev),
:deep(.ant-pagination .ant-pagination-next) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

:deep(.ant-pagination .ant-pagination-prev:hover),
:deep(.ant-pagination .ant-pagination-next:hover) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 图片渐入动画 */
@keyframes image-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 历史记录按钮样式 */
.history-button {
  background: linear-gradient(45deg, #20a1da, #1a8bc7);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.history-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(32, 161, 218, 0.4);
}

/* 右侧触发器按钮样式 */
.trigger-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 90px;
  background: linear-gradient(135deg, #20a1da 0%, #1a8bc7 100%);
  backdrop-filter: blur(15px);
  border-radius: 22px 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 998;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: -6px 0 20px rgba(32, 161, 218, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: slideInRight 0.8s ease-out 1.8s both;
}

.trigger-btn:hover {
  width: 55px;
  background: linear-gradient(135deg, #1a8bc7 0%, #20a1da 100%);
  box-shadow: -10px 0 25px rgba(32, 161, 218, 0.6);
  transform: translateY(-50%) scale(1.05);
}

.trigger-btn span {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 1px;
}

.trigger-btn:hover span {
  transform: scale(1.2);
}
</style>
